<template>

  <section class="index-boy">
    <div class="boys" v-for="(boy,index) in arrBoy.slice(1,2)" :key="index">
      <div class="boys_title">
        —— {{ boy.title }} ——
      </div>
      <div class="boys0">
        <div class="boys1">
          <p class="p1">{{ boy.items[0].title }}</p>
          <p class="p2">火爆开售</p>
          <router-link :to="{path:'/ProductDetails',query: {id: boy.items[0].gid}}"><img :src="boy.items[0].image" alt=""></router-link>
        </div>
        <div class="boys1">
          <p class="p1">{{ boy.items[1].title }}</p>
          <p class="p2">火爆开售</p>
          <router-link :to="{path:'/ProductDetails',query: {id: boy.items[1].gid}}"><img :src="boy.items[1].image" alt=""></router-link>
        </div>
        <div class="boys5" v-for="(boys,index) in boy.items.slice(2)" :key="index">
          <p class="p1">{{ boys.title }}</p>
          <router-link :to="{path:'/ProductDetails',query: {id: boys.gid}}"><img :src="boys.image" alt=""></router-link>
          <p class="p2">¥{{ boys.price }}</p>
          <p class="p3">¥97.50</p>
        </div>
      </div>
    </div>
  </section>

</template>

<script>
import axios from 'axios';
  export default  {
    name: 'index-boy',
    props: [],
    created() {
      axios("http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f").then((res)=>{
        this.arrBoy = res.data.data;
        // console.log("男装",res.data.data.slice(1,2));
      })
    },
    data() {
      return {
        arrBoy:[]
      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped>
  .boys{
    height: 5.12rem;
    background: #fff;
    margin-top: 0.19rem;
  }
  .boys_title{
    font-size: 0.22rem;
    color: #fe6719;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .boys0{
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .boys1{
    float: left;
    height: 2.02rem;
    width: 49%;
    border-right: 0.02rem solid #f7f7f7;
    text-align: center;
    border-bottom: 0.02rem solid #f7f7f7;
    padding-bottom: 0.12rem;
  }
  .boys1 .p1{
    font-size: 0.22rem;
    font-weight: bold;
    margin-left: 0.06rem;
    margin-top: 0.22rem;
    overflow: hidden;
    white-space: nowrap;
  }
  .boys1 .p2{
    color: #7b7f82;
    font-size: 0.1rem;
  }
  .boys1 p{
    line-height: 0.28rem;
  }
  .boys1 img{
    width: 1rem;
    height: 1.2rem;
  }
  .boys2{
    float: left;
    width: 50%;
    height: 2.02rem;
    border-bottom: 0.02rem solid #f7f7f7;
    padding-bottom: 0.12rem;
  }
  .boys5{
    height: 2.44rem;
    width: 24.5%;
    border-right: 0.02rem solid #f7f7f7;
    overflow: hidden;
    text-align: center;
    float: left;
  }
  .boys5 .p1{
    font-weight: bold;
    white-space: nowrap;
    font-size: 0.22rem;
    margin-left: 0.07rem;
  }
  .boys5 img{
    width: 1.28rem;
    height: 1.25rem;
  }
  .boys5 .p2{
    color: #d32a4e;
  }
  .boys5 .p3{
    color: #7b7f82;
    text-decoration: line-through;
  }
  .boy5:nth-last-child(){
    width: 24%;
    border-right: none;
  }
</style>
